<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!doctype html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>购物车</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css"/>
    <script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- 引入自定义css文件 style.css -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css"/>
    <style>
        body {
            margin-top: 20px;
            margin: 0 auto;
        }

        .carousel-inner .item img {
            width: 100%;
            height: 300px;
        }

        .container .row div {
            /* position:relative;
 float:left; */
        }

        font {
            color: #3164af;
            font-size: 18px;
            font-weight: normal;
            padding: 0 10px;
        }
    </style>
</head>

<body>
<jsp:include page="header.jsp"/>
<c:if test="${username==null}">
    <div style="margin-left: 600px">
        您还没有登录，请先登录：<a href="${pageContext.request.contextPath}/login">登录</a>
    </div>
</c:if>
<c:if test="${username!=null}">
    <c:if test="${cart.list==null}">
        <div style="margin-left: 600px">
            购物车还没有商品，快去添加吧！<a href="${pageContext.request.contextPath}/index">首页</a>
        </div>
    </c:if>
    <c:if test="${cart.list!=null}">
        <div class="container">
            <div class="row">
                <div style="margin:0 auto; margin-top:10px;width:950px;">
                    <strong style="font-size:16px;margin:5px 0;">购物车详情</strong>
                    <table class="table table-bordered">
                        <tbody>
                        <tr class="warning" align="center">
                            <td>图片</td>
                            <td>商品</td>
                            <td>价格</td>
                            <td>数量</td>
                            <td>小计</td>
                            <td>操作</td>
                        </tr>
                        <c:forEach items="${cart.list}" var="product">
                            <tr class="active" align="center">
                                <td width="60" width="40%">
                                    <input type="hidden" name="id" value="22">
                                    <img src="${pageContext.request.contextPath}/static/work/Tomcat/localhost/ROOT/${product.pimage}"
                                         width="70" height="60">
                                </td>
                                <td width="30%">
                                    <a target="_blank"
                                       href="${pageContext.request.contextPath}/productInfo/${product.productId}">${product.productName}</a>
                                </td>
                                <td width="20%">
                                    ￥${product.productPrice}
                                </td>
                                <td width="10%">
                                    <input pid="${product.productId}" type="text" name="productBuyNum"
                                           value="${product.userProduct.productBuyNum}" maxlength="4" size="10">
                                </td>
                                <td width="15%">
                                    <span class="subtotal">￥${product.userProduct.subtotal}</span>
                                </td>
                                <td align="center">
                                    <button class="btn btn-danger"
                                            onclick="deleteOneCart(${product.userProduct.userId},${product.productId})">
                                        删除
                                    </button>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>

            <div style="margin-right:130px;">
                    <div style="text-align:right;margin-right:10px">
                            商品金额: <strong style="color:#ff6600;" id="total"></strong>
                    </div>
                    <div class="input-group" style="margin-top: 10px;width: 300px;margin-left:710px;text-align:right;">
                            <span class="input-group-addon" id="sizing-addon1">收货地址</span>
                            <input name="orderAddress" type="text" class="form-control" placeholder="请输入收货地址"
                                   aria-describedby="sizing-addon1">
                    </div>
                <div style="text-align:right;margin-top:10px;margin-bottom:10px;">
                    <input type="submit" onclick="commitCart()" width="100" value="提交订单" name="submit"
                           style="background: url('${pageContext.request.contextPath}/images/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
                                   height:35px;width:100px;color:white;">
                </div>
            </div>

        </div>
    </c:if>
</c:if>
<div style="margin-top:50px;">
    <img src="${pageContext.request.contextPath}/image/footer.jpg" width="100%" height="78" alt="我们的优势" title="我们的优势"/>
</div>

<div style="text-align: center;margin-top: 5px;">
    <ul class="list-inline">
        <li><a>关于我们</a></li>
        <li><a>联系我们</a></li>
        <li><a>招贤纳士</a></li>
        <li><a>法律声明</a></li>
        <li><a>友情链接</a></li>
        <li><a target="_blank">支付方式</a></li>
        <li><a target="_blank">配送方式</a></li>
        <li><a>服务声明</a></li>
        <li><a>广告声明</a></li>
    </ul>
</div>
<div style="text-align: center;margin-top: 5px;margin-bottom:20px;">
    Copyright &copy; 2005-2016 材搬配建材商城 版权所有
</div>

</body>

<script>
    window.onload = showTotal();
    // window.onload = pageCart();
    //
    // function pageCart() {
    //     $.ajax({
    //         async: false,
    //         url: "/cbp/cart/1/100/1",
    //         type: "get",
    //         dataType: "json"
    //     });
    // }

    function deleteOneCart(userId, productId) {
        $.ajax({
            async: false,
            url: "/cbp/userProduct/deleteOneCart/" + userId + "/" + productId,
            type: "get",
            dataType: "json",
            success: function (json) {
                alert(json.msg);
                window.location.href = "http://localhost:8088/cbp/cart";
            }
        });
        showTotal();//更新总金额显示
    }

    function showTotal() {
        var eles = document.getElementsByClassName("subtotal");
        console.log(eles);
        var sum = 0;
        if (eles.length > 0) {
            for (var i = 0; i < eles.length; i++) {
                var money = parseFloat(eles[i].innerHTML.substring(1));//获取数值
                sum += money;
            }
            document.getElementById("total").innerHTML = "￥" + sum + "元";
        }
    }

    function commitCart() {
        var domInput = $("input[name='orderAddress']");
        var orderAddress = domInput.val();
        if (orderAddress.trim() == null || orderAddress == "") {
            alert("请输入收货地址!");
        } else {
            $.ajax({
                async: false,
                url: "/cbp/userProduct/commitCart/1/" + orderAddress,
                type: "get",
                dataType: "json",
                success: function (json) {
                    alert(json.msg);
                    window.location.href = "http://localhost:8088/cbp/cart";
                }
            });
        }
    }

    $(function () {
        $("input[name='productBuyNum']").blur(function () {
            var index = $("input[name='productBuyNum']").index(this);
            //获取当前商品的pid，让后端改变购物车中该商品的数量
            var pid = $(this).attr("pid");
            var num = $(this).val();
            $.ajax({
                url: "/cbp/userProduct/updateCart/1/" + pid + "/" + num,
                method: "get",
                dataType: "json",
                success: function (data) {
                    alert(data.msg);
                    window.location.href = "http://localhost:8088/cbp/cart";
                }
            })
        })

    })
</script>
</html>
